<template>
  <div class="app-share-bar">
    <div class="action-btn shadow ui-animation">
      <ClientOnly>
        <el-tooltip effect="dark" content="提交你的模板" placement="top">
          <NuxtLink target="_blank" href="/post/edit">
            <Icon name="carbon:add" size="28" />
          </NuxtLink>
        </el-tooltip>
      </ClientOnly>
    </div>
    <ClientOnly>
      <div class="action-btn with-badge ui-animation shadow" :class="{ on: isLiked }" :badge="likeCount" @click="onLike">
        <Icon name="carbon:thumbs-up-filled" :class="{ on: isLiked }" />
      </div>
    </ClientOnly>
    <div class="action-btn with-badge ui-animation shadow" none badge="4">
      <Icon name="fa:commenting" />
    </div>
    <ClientOnly>
      <el-popover popper-class="app-share-bar-popover" placement="right-start" trigger="hover">
        <template #reference>
          <div class="action-btn share-more ui-animation shadow">
            <Icon name="ion:share-social-sharp" />
          </div>
        </template>
        <div class="relative">
          <div class="action-share-popup">
            <ul class="action-share-list">
              <li class="share-item wechat">
                <Icon name="uiw:weixin" />
                <span class="share-item-title">微信</span>
                <div class="wechat-qrcode animate__animated animate__bounceIn">
                  <div class="wechat-qrcode-img">
                    <canvas id="canvas" ref="qr" />
                  </div>
                  <span class="wechat-qrcode-title">微信扫一扫</span>
                </div>
              </li>
              <li class="share-item qq" @click="() => onShare('qq')">
                <Icon name="ri:qq-fill" />
                <span class="share-item-title">QQ</span>
              </li>
              <li class="share-item weibo" @click="() => onShare('weibo')">
                <Icon name="mdi:sina-weibo" />
                <span class="share-item-title">新浪微博</span>
              </li>
              <li v-clipboard:copy="currentUrl" v-clipboard:success="onCopy" v-clipboard:error="onError" class="share-item link" title="复制文章链接">
                <Icon name="mdi:link-variant" />
                <span class="share-item-title">文章链接</span>
              </li>
            </ul>
          </div>
        </div>
      </el-popover>
    </ClientOnly>
  </div>
</template>
<script setup lang="ts">
import QRCode from 'qrcode'

interface EditProps {
  likeCount: number
  isLiked: boolean
}

const props = withDefaults(defineProps<EditProps>(), {
  likeCount: 0,
  isLiked: false,
})
const { isLiked, likeCount } = toRefs(props)
const currentUrl = isBrowser() ? window.location.href : ''
const emit = defineEmits(['handleLike'])
// 分享
const onShare = (type: string) => {
  const options = {
    type,
    url: currentUrl,
    title: document.title,
    pics: '',
    summary: '摘要',
    desc: '描述',
    appkey: 'abcdef',
  }
  shareTo(options)
}

// 复制
const onCopy = () => {
  notice('复制成功！')
}
const onError = () => {
  notice('复制失败，请稍候再试！')
}

// 点赞
const onLike = () => {
  emit('handleLike', likeCount.value++)
}

// 渲染二维码
onMounted(() => {
  nextTick(() => {
    isBrowser() &&
      QRCode.toCanvas(document.getElementById('canvas'), currentUrl, function (error: any) {
        if (error) console.error(error)
      })
  })
})
</script>
<style lang="scss" scoped></style>
